<template>
  <div class="pages index">
    <toolbar></toolbar>
    <heads title='全部美剧' showBack></heads>
    <div class="mask" v-if="showMask"></div>
    <div class="welcome" v-if="welcome">
      <img src="../assets/logo.png" alt=""> 
      <button @click="getAll">开启美剧之旅</button>
      <button class="new" @click="getNew">获取最新美剧</button>
    </div>
    <div class="content">
      <div class="list">
        <div class="movie-card all" v-for="(item, index) in storage" :key="index"  @click="showDetail(item)" v-show="!likeM&&!search">
          <i class="star" @click="like(index, $event)">{{ item.collected ? '★' : '☆' }}</i>
          <div class="thumb">
            <div class="image" v-lazy:background-image="item.poster" ></div>  
          </div>
          <div class="title">{{ item.title }}</div>
        </div>
        <div class="movie-card" v-for="(item, index) in storage" :key="index"  @click="showDetail(item)" v-show="likeM&&!search" v-if='item.collected'>
          <i class="star" @click="like(index, $event)">{{ item.collected ? '★' : '☆' }}</i>
          <div class="thumb">
            <div class="image" v-lazy:background-image="item.poster" ></div>  
          </div>
          <div class="title">{{ item.title }}</div>
        </div>  
        <div class="movie-card" v-for="(item,index) in searchResult" :key="index"  @click="showDetail(item)" v-show="!likeM&&search" >
          <i class="star" @click="likeSearch(index, $event)">{{ item.collected ? '★' : '☆' }}</i>
          <div class="thumb">
            <div class="image" v-lazy:background-image="item.poster" ></div>  
          </div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <div class="movie-detail" v-show="isShowDetail">
        <span class="close-btn" type="mg" @click="cancel">Close</span>
        <ul class="link-list" v-for="item in selectItem" :key='item'>
          <li v-for="source in item" :key='source'>
            <span>{{source.type}}</span>
            <a :href="source.link" >{{ source.name }}</a>
          </li>
        </ul>
      </div>
    </div>  
    <div class="searchBar" v-if="isSearch">
      <input class="search-input" type="text" name="search" v-model="searchStr" placeholder="输入内容搜索"/>
      <i @click="searchHide">✖</i>
    </div>
    <div class="toolkit" v-if="showToolkit">
      <div class="tool-warp">
        <div class="tool-btn" @click="showSearchBar" title='搜索'><span class="tips">搜索</span><i class="icon">✎</i></div>
        <div class="tool-btn" @click="showLikeMovie" title='收藏'><span class="tips">收藏</span><i class="icon">★</i></div>
        <div class="tool-btn" @click="closeWindow" title='关闭'><span class="tips">关闭</span><i class="icon">✖</i></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Heads from '@/components/header';
  import toolbar from '@/components/toolbar'
  const api = 'https://bird.ioliu.cn/v1?url=http://dodserver.leanapp.cn'
  export default {
    name: 'index',
    components: {
      Heads,toolbar
    },
    data(){
      return {
        storage: [],
        welcome:true,
        showMask:false,
        isShowDetail : false,
        showToolkit:false,
        search:false,
        isSearch:false,
        selectItem: {},
        storageTitle: [],
        likeM:false,
        list: [],
        limit: 10,
        page: 1,
        searchStr:'',
        searchResult: []
      }
    },
    methods: {
      getAll(){
        if (typeof (localStorage.movie) === 'undefined') {
        var vm = this
        this.$http.get(api + '/list')
          .then(function (res) {
            console.log('get data from url')
            vm.storage = res.data.resource
            vm.storage = vm.storage.filter(item => item.resource.length !== 0)
            for (let ele of vm.storage) {
              ele.collected = false
              vm.storageTitle.push(ele.title)
            }
            localStorage.movie = JSON.stringify(vm.storage)
            vm.getByPage()
          })
          .catch(function (error) {
            console.log(error)
          })
        }else{
          console.log('get data from localStorage')
          this.storage = JSON.parse(localStorage.movie)
          for (let a of this.storage) {
            this.storageTitle.push(a.title)
          }
          this.getByPage()
        }
      },
      getNew(){
        this.page = 1
        this.list = [];
        this.storageTitle = [];
        var collectMovie = [];
        var pps = JSON.parse(localStorage.movie)
        pps.forEach(function (value, index) {
          if (value.collected === true) collectMovie.push(value.title)
        })
        this.storage = []
        var v = this
        this.$http.get(api + '/list')
          .then(function (res) {
            console.log('update data from url')
            v.storage = res.data.resource
            v.storage = v.storage.filter(item => item.resource.length !== 0)
            for (let ele of v.storage) {
              ele.collected = false;
              collectMovie.forEach(function (value, index) {
                if(ele.title === value){
                  ele.collected = (ele.title === value);
                }
              })
              v.storageTitle.push(ele.title)
            }
            localStorage.movie = JSON.stringify(v.storage)
            v.getByPage()
            alert('剧集已更新 :)')
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      getByPage () {
        console.log('get by page')
        for (let i = (this.page - 1) * this.limit; i < this.page * this.limit; i++) {
          this.list = this.list.concat(this.storage[i])
          //console.log(this.storage[i])
        }
        this.showToolkit = true;
        this.welcome = false;
        //console.log(this.list.length)
      },
      showDetail (item) {
        this.showMask = true;
        this.isShowDetail = true
        this.selectItem = item.resource
        //console.log(item.title,item.resource)
      },
      cancel(){
        this.isShowDetail = false;
        this.showMask = false;
      },
      like(index, event){
        event.stopPropagation();
        // this.storage[index].collected = !(this.storage[index].collected);
          this.storage[index].collected = !(this.storage[index].collected);
        console.log(this.storage[index].collected , !(this.storage[index].collected))
        localStorage.movie = JSON.stringify(this.storage)
      },
      likeSearch(index,event){
        event.stopPropagation();
        //console.log(this.searchResult[index] )
        this.searchResult[index].collected = !this.searchResult[index].collected;
      },
      showLikeMovie(){
        this.likeM = !this.likeM;
      },
      searchHide(){
        this.searchStr = ''
        this.isSearch = false;
      },
      showSearchBar(){
        this.isSearch = true;
        this.likeM = false;
      },
      closeWindow(){
        this.likeM = false;
        this.isSearch = false;
      }
    },
    watch: {
      searchStr (val) {
        if (val !== '') {
          this.search = true
          var result = []
          var re = new RegExp(val)
          var vm = this
          this.storageTitle.forEach(function (e, index) {
            if (e.match(re)) {
              result.push(vm.storage[index])
            }
          })
          this.searchResult = result
        } else {
          this.search = false
        }
        //console.log(this.search)
      }
    }
  }
</script>

<style lang='less'>
  * {
    margin: 0;
    padding: 0;
  }
  html,body{
    width:100%;
    height: 100%;
  }
  #app{
        height: 99%;
    max-height:100%; 
  }
  &::-webkit-scrollbar {
    width:10px;
    background: inherit;
  }

  &::-webkit-scrollbar-thumb {
    width: 10px;
    background: #525250;
  }
  body{
    background-color: #f8f8f8;
    
  }
  i{
    font-style: normal;
  }
  .pages{
    flex-direction:column;
    display:flex;
    width:100%;
    height:100%;
    // padding: 0 15px;
    .content{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      overflow-y: scroll;
      height: 100%;
      margin: 10px 0 0 10px;
    }
    .header{
      margin: 10px ;
      .title{
        -webkit-app-region: drag;
      }
    }
    .mask{
      background: rgba(0, 0, 0, 0.6);
      z-index: 9999;
      position: fixed;
      top: 0; left: 0;
      bottom: 0; right: 0;
    }
    .welcome{
      position: fixed;
      top: 0; left: 0;
      bottom: 0; right: 0;
      z-index: 999;
      background: rgba(0, 0, 0, 0.6);
      img{
        width: 200px;
        position: absolute;
        top: 35%;left: 50%;
        transform: translateX(-50%);
      }
      button{
        position: absolute;
        bottom: 50%;left: 50%;
        background: #636363;
        transform: translateX(-50%);
        display: block;
        border: 1px solid #909090;
        padding: 10px 15px;
        font-size: 18px;
        color: #e8e8e8;
        outline: none;
        &:hover{
          background: #909090;
          color: #fff;
        }
      }
      .new{
        bottom: 40%;
      }
    }
    .list{
      display: flex;
      flex-wrap: wrap;
    }
    & .movie-card {
      cursor: pointer;
      position: relative;
      width: 200px; 
      height: 240px;
      margin: 5px;
      overflow: hidden;
      display: inline-block;
      & .star {
        position: absolute;
        top: 0; right: 0;
        font-size: 40px;
        color: yellow;
        user-select: none;
        transition: .3s all ease;
        z-index: 2;
        font-style: normal;
        &:hover {
          transform: scale(1.3);
        }
      }
      & .thumb {
        position: absolute;
        width: 200px; height: 200px;
        overflow: hidden;
      }
      & .image {
        width: 200px; height: 200px; 
        background-image: url("http://iph.href.lu/200x200?text=%E6%9A%82%E6%97%A0%E5%9B%BE%E7%89%87");
        background-position: center; 
        background-repeat: no-repeat; 
        background-size: cover;
        transition: .3s all ease;
        transform-origin: 50% 50%;
      }
      &:hover .image {
        transform: scale(1.3)
      }
      & .title {
        position: absolute;
        top: 200px;
        width: 190px; height: 30px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        font-size: .8rem;
        border: 5px solid #e8e8e8;
        color: #e8e8e8;
        background: #000;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        user-select: none;
        transition: .3s all ease;

        &::-webkit-scrollbar {
          height:4px;
          background: inherit;
        }

        &::-webkit-scrollbar-thumb {
          height: 4px;
          background: #e8e8e8;
        }
      }
      &:hover .title {
        color: black;
        background: white;
      }
      &:hover .title::-webkit-scrollbar-thumb {
        background: black;
      }
    }
    & .movie-detail {
      position: fixed;
      top: 5%; right: 5%;
      bottom: 5%; left: 5%;
      border: 2px solid white;
      background: black;
      overflow-x: scroll;
      overflow-y: scroll;
      z-index: 10000;

      &::-webkit-scrollbar {
        width:10px;
        background: inherit;
      }

      &::-webkit-scrollbar-thumb {
        width: 10px;
        background: white;
      }

      & .close-btn {
        position: fixed;
        right: 7%;
        top: 6%;
        background: #FFF;
        padding: 5px 10px;
        border: 2px solid #000;
        cursor: pointer;
        z-index: 10011;
        &:hover{
          color: #FFF;
          background:#000; 
          border: 2px solid #fff;
          cursor: pointer;
        }
      }

    & .link-list {
      padding: 0;
      list-style: none;

      & li {
        margin: 20px 10px;
        color: white;
        white-space: nowrap;
        & span {
          margin: 10px 10px;
          padding: 2px;
          color: white;
          border: 1px dashed white;
        }
        & a {
          text-decoration: none;
          white-space: nowrap;
          font-size: 1.5rem;
          line-height: 1.5rem;
          padding: 3px;
          background: black;
          color: white;
          border: 2px solid white;
          transition: .3s all ease;

          &:hover {
            margin-left: 20px;
            color: black;
            background: white;
          }
        }
      }
    }
  }
  .searchBar {
    position: fixed;
    bottom: 55px; left: 50%;
    height: 40px;
    background: white;
    transform: translateX(-120px);
    & .search-input {
      position: absolute;
      top: 0; left: 0;
      height: 40px;
      width: 200px;
      font-size: 1.1rem;
      font-weight: bold;
      border: none;
      outline: none;
      padding: 0 10px;
      border: 1px solid #000;
    }

    & i {
      cursor: pointer;
      position: absolute;
      top: 0; left: 220px;
      font-size: 32px;
      height: 42px;
      width: 40px;
      overflow:hidden;
      color: white;
      background: black;
      text-align: center;
    }
  }
  .toolkit {
    z-index: 10;
    background: #f8f8f8;
    height: 40px;
    width: 100%;
    padding: 5px 0; 
    text-align: center;
    .tool-warp{
      // position: absolute
    }
    & .tool-btn {
      display: inline-block;
      cursor: pointer;
      text-align: center;
      user-select: none;
      width: 40px; height: 40px;
      border-radius: 10px;
      background: #000;
      margin: 0 10px;
      transition: .3s all ease;
      position: relative;
      .tips{
        display: none;
        position:absolute;
        width: 80px;
        height: 20px;
        line-height: 20px;
        background: #000;
        color: #fff;
        font-size: 18px;
        padding:5px  0;
        border-radius: 5px;
        top: -30px;
        left: -20px;

      }
      &:hover {
        margin-top: -5px;
        &>.tips{
          display: block;
        }
      }
      & .icon {
        font-size: 40px;
        color: #fff;
        font-style: normal;
        line-height: 40px;
        text-align: center;
      }

      & .active {
        color: yellow;
      }
    }
  }
  }
  
</style>